<template>
  <!-- 业务查询-短信/APP记录查询列表-页面 -->
  <section class="page">
    <data-form :model="queryModel" @onSearch="refreshData" :page="pageService" @handleResetForm="follFeedback" :rules="rules">
      <template slot="inputs">
        <el-form-item label="账户号" prop="caseNumber">
          <el-input v-model="queryModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户号" prop="personalNo">
          <el-input v-model="queryModel.personalNo"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="queryModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idCard">
          <el-input v-model.trim="queryModel.idCard"></el-input>
        </el-form-item>
        <el-form-item label="机构号" prop="departmentCode">
          <el-input v-model.trim="queryModel.departmentCode"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="queryModel.mobileNo"></el-input>
        </el-form-item>
        <!-- <el-form-item label="客户姓名" prop="queueStatus">
          <el-select v-model="queryModel.queueStatus" size="small">
            <el-option v-for="{index,name,code} in $dict.getDictData('QueueStatus')" :key="index" :label="name" :value="code">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="证件号" prop="changeHandType">
          <el-select v-model="queryModel.changeHandType" size="small">
            <el-option v-for="{index,name,code} in $dict.getDictData('ChangeHandType')" :key="index" :label="name" :value="code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发送人" prop="operatorRealName">
          <el-input v-model="queryModel.operatorRealName"></el-input>
        </el-form-item>
        <el-form-item label="发送时间" prop="createTime">
          <el-date-picker type="daterange" :editable="false" v-model="queryModel.createTime" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发送状态" prop="smsStatus">
          <el-select v-model="queryModel.smsStatus" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData('SmsStatus')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账户队列" prop="queueName">
          <el-input v-model="queryModel.queueName"></el-input>
        </el-form-item>
        <el-form-item label="轻渠道队列" prop="channelQueueCode">
          <el-input v-model="queryModel.channelQueueCode"></el-input>
        </el-form-item>
      </template>
    </data-form>

    <data-box :data="queueDataSet" @onPageChange="refreshData" :page="pageService">
      <template slot="columns">
        <el-table-column prop="caseNumber" label="账户号" :min-width="$helper.getColumnWidth(7)">
          <template slot-scope="scope">
            <span class="caseNumber" type="text" @click="openExecutionPage(scope.row)">{{scope.row.caseNumber}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="customerRelationship" label="与客户关系" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="mobileNo" label="手机号" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="idCard" label="证件号" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="departmentCode" label="机构号" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="queueName" label="账户队列" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="channelQueueCode" label="轻渠道队列" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="templateName" label="模板名称" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip></el-table-column>
        <el-table-column label="短信内容" prop="smsContent" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="handlerCode" label="经办代号" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="operatorRealName" label="操作员" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="发送时间" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip :formatter="(row) => $filter.dateTimeFormat(row.createTime)"></el-table-column>
        <el-table-column prop="smsStatus" label="发送状态" :formatter="
            row => row.smsStatus===0?'发送成功':'发送失败'
          " :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
      </template>
    </data-box>

  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Layout, Dependencies } from '~/core/decorator';
import { PageService } from '~/utils/page.service';
import { SortService } from "~/utils/sort.service"
import { QueueService } from "~/services/domain-service/queue-manage.service";
import { QueueLogService } from "~/services/domain-service/queue-log.service";
import AddRobotQueue from '~/components/queue-manage/add-robot-queue.vue';
import AddPithyQueue from '~/components/queue-manage/add-pithy-queue.vue';
import QueueModifyLog from '~/components/queue-manage/queue-modify-log.vue';
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { MENU_CHANNEL } from "~/config/enum.config"

import { Prop } from 'vue-property-decorator';
@Layout('workspace')
@Component({
  components: {
    AddRobotQueue,
    AddPithyQueue,
    QueueModifyLog,
  },
})
export default class RecordList extends Vue {
  @Dependencies(CaseOperatorPageService) private CaseOperatorPageService: CaseOperatorPageService
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(SortService) private sortService: SortService;
  @Dependencies(QueueService) private queueService: QueueService;
  @Dependencies(QueueLogService) private queueLogService: QueueLogService;
  @Prop() private recordType;
  private rules: any = {
    mobileNo: [{ validator: this.$validator.phoneNumber, trigger: "change" }],
    idCard: [{ validator: this.$validator.idcardUscc, trigger: "change" }]
  };
  private queueId = '';
  private readOnly = false;
  private edit = false;
  private showGuzhi = true;
  private queryModel: any = {
    createTime: { max: "", min: "" },
    caseNumber: '',
    queueCode: '',
    personalName: '',
    idCard: '',
    departmentCode: '',
    mobileNo: '',
    smsStatus: ''
  };
  private queueDataSet: any[] = [];
  private dialog: any = {
    add: false,
    addAgent: false,
    title1: '',
  };

  private pickerOptions = {
    disabledDate (time) {
      return time.getTime() > Date.now();
    },
  }

  private mounted() {
    this.refreshData();
  }

  private follFeedback() {
    this.queryModel.createTime = { min: "", max: "" }
  }

  private paramsHandler() {
    const params = { ...this.queryModel }
    params.sendEndTime = this.$filter.dateRanageFormat(
      this.queryModel.createTime
    ).end;
    params.sendStartTime = this.$filter.dateRanageFormat(
      this.queryModel.createTime
    ).start;
    delete params.createTime;
    return params;
  }

  private refreshData() {
    this.CaseOperatorPageService.findSmsSendLog(this.paramsHandler(), this.pageService).subscribe(data => {
      this.queueDataSet = data;
      console.log(this.queueDataSet)
    });
  }
  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.$router.openCaseDetail(row.caseId, {
      menuChannel: MENU_CHANNEL.Query_case_query,
      hiddenCaseList: true,
      hiddenAction: true
    })
  }

}
</script>

<style lang="less" scoped>
.caseNumber {
  color: #409eff;
  cursor: pointer;
}
</style>
